<template>
    <div class="page">
        <AdminTabsP :list="tabList" v-model:active="tabActive" />

        <AdminSearchInputP @search="onSearch" placeholder="搜索订单名称" />

        <template v-if="filterList.length">
            <div class="order-list">
                <div
                    class="order-item"
                    v-for="item in renderList"
                    :key="item.id"
                >
                    <div class="order-item__image">
                        <img
                            :src="
                                item.info
                                    ? item.info.file +
                                      '?x-oss-process=image/watermark,image_' +
                                      toBase64(
                                          'water/logo_white.png?x-oss-process=image/resize,P_30'
                                      ) +
                                      ',g_center,t_60'
                                    : ''
                            "
                        />
                    </div>
                    <div class="order-item__main">
                        <div class="main-top">
                            {{ item.info ? item.info.name : "" }}
                        </div>
                        <div class="main-bottom">
                            <div class="main-bottom__item">
                                购买时间：{{
                                    formatDate(item.paytime, "YYYY-MM-DD")
                                }}
                            </div>
                            <div
                                class="main-bottom__item version"
                                v-if="tabActive == 1"
                            >
                                版本：{{
                                    item.temspecs_type === "customer"
                                        ? "定制版"
                                        : item.temspecs?.name || "-"
                                }}
                            </div>
                            <!-- <div
                                class="main-bottom__item"
                                v-if="tabActive == 1"
                            >
                                有效期：1年
                            </div> -->
                            <div class="main-bottom__item order_no">
                                <el-tooltip
                                    :content="item.order_no"
                                    effect="dark"
                                    placement="top"
                                >
                                    订单ID：{{ item.order_no }}
                                </el-tooltip>
                            </div>
                        </div>
                    </div>
                    <div class="order-item__right">¥{{ item.price }}</div>
                </div>
            </div>

            <div class="pagination-box">
                <el-pagination
                    small
                    background
                    v-model:current-page="pagination.page"
                    v-model:page-size="pagination.size"
                    layout="total, prev, pager, next, jumper"
                    :total="filterList.length"
                />
            </div>
        </template>

        <el-empty :image-size="150" v-else />
    </div>
</template>
<script setup>
import { useContent } from ".";

const {
    isLoading,
    tabActive,
    tabList,
    filterList,
    pagination,
    renderList,
    GetList,
    onSearch,
} = useContent();

await GetList();
</script>
<style lang="scss" scoped>
.page {
    width: 100%;
    padding: 0 16px;
}

.order-list {
    background-color: #fff;
    border-radius: 6px;
    height: calc(100% - 185px);
    overflow: auto;

    .order-item {
        display: flex;
        padding: 12px;
        border-bottom: 1px solid #dddddd;

        &__image {
            width: 100px;
            height: 68px;

            img {
                width: 100%;
                height: 100%;
                border-radius: 6px;
                object-fit: cover;
            }
        }

        &__main {
            padding-left: 18px;
            padding-top: 11px;
            padding-bottom: 5px;
            display: flex;
            flex-direction: column;

            .main-top {
                color: #333;
                font-size: 16px;
            }

            .main-bottom {
                display: flex;
                margin-top: auto;
                font-size: 14px;

                &__item {
                    color: #666;
                    margin-right: 15px;

                    &.version {
                        width: 200px;
                    }

                    &.order_no {
                        width: 300px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        margin-left: 20px;
                    }
                }
            }
        }

        &__right {
            margin-left: auto;
            color: #5185fb;
            font-size: 20px;
            font-weight: 500;
        }
    }
}

.pagination-box {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>
